<template>
    <div class="form">
        <el-form ref="form" :model="obj.data" label-width="0">
            <el-form-item label="" prop="file" :rules="[formRulesMixin.notNull]">
                <el-upload
                    :action="proxy.$setting.globalUrl.uploadserver"
                    :auto-upload="true"
                    class="upload-demo"
                    drag
                    :data="{rename:1}"
                    multiple
                    :accept="['application/msword','application/pdf','application/vnd.openxmlformats-officedocument.wordprocessingml.document','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','application/vnd.ms-excel']"
                    v-model:file-list="obj.data.file"
                    :on-change="handleChange"
                    :on-success="handleSuccess"
                >
                    <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
                    <div class="el-upload__text flex-column">
                        <span>拖放文件置此处 或 <em>点击上传</em></span>
                        <span style="font-size: 12px;color: #999;">目前支持上传doc、docx、pdf、xls、xlsx文件类型</span>
                    </div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div class="btns">
            <el-button @click="$emit('close')">取消</el-button>
            <el-button type="primary" @click="upData">提交</el-button>
        </div>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, computed } from 'vue'
    import { UploadFilled } from '@element-plus/icons-vue'
    import UpfileSingle from '@/components/upfile_single.vue'
    let { proxy } = getCurrentInstance()
    const emit = defineEmits(['init', 'close']) //此处要完全对应，采用固定的update:prop属性
    const props = defineProps({
        data: { type: Object, default: () => { return {}}},
    })

    let obj = reactive({
        data: {
            file: [],
        }
    })

    const handleChange=async(e)=>{
        console.log(e); 
    }

    let upData = () => {
        proxy.$refs['form'].validate(valid => {
            if (valid) {
                let upnums = 0
                let allnums = obj.data.file.length
                obj.data.file.map(async(e,i)=>{
                    e.isup = await up(e.response.filename)
                    upnums += e.isup?1:0
                    console.log('allnums1',allnums,upnums);
                    if(allnums-1==i){
                        console.log('allnums',allnums,upnums);
                        
                        if(allnums==upnums){
                            proxy.elMessageMixin(`成功`, 'success')
                            proxy.$emit('close')
                            proxy.$emit('init')
                        }else{
                            proxy.elMessageMixin(`有文件未上传成功！`, 'error')
                            obj.data.file = obj.data.file.filter(e=>!e.isup)
                        }
                    }
                })
            } else {
                return false
            }
        })
    }

    const handleSuccess=(e)=>{
        obj.data.file = obj.data.file.filter(e=>e.response.filename)
    }

    const up=(filename)=>{
        return new Promise((resovle,rej)=>{
            proxy.$ajax({
                url: '/manager/knowledge/file/design',
                data: {
                    filename: filename,
                    company_knowledge_id: proxy.$route.query.id,
                },
                bfLoading: true
            }).then(data => {
                if(data.success){
                    resovle(true)
                }else{
                    resovle(false)
                }
            }).catch(() => {resovle(false)})
        })
    }
</script>

<style scoped>
.upload-demo{width: 100%;}
</style>

